  
<template>
	<view :class="[className]" class="bnn-button" hover-class="bnn-button-hover">
		<button
		:type="type"
		:size="size"
		:class="{'circle': circle, 'square': square, 'border': border}"
		:disabled="disabled"
		:form-type="formType"
		@click="onClick">
			<slot name="default"/>
		</button>
	</view>
</template>

<script>
	export default {
		props: {
			className: {
				type: String,
				default: ''
			},
			//	[ primary => '蓝色', default => '白色', warn => '红色' ]
			type: {
				type: String,
				default: 'default'
			},
			//	[ default => '默认大小', mini => '小尺寸' ]
			size: {
				type: String,
				default: 'default'
			},
			//	按钮圆角
			circle: {
				type: Boolean,
				default: false
			},
			//	按钮直角
			square: {
				type: Boolean,
				default: false
			},
			//	按钮边框
			border: {
				type: Boolean,
				default: false
			},
			//	按钮禁用
			disabled: {
				type: Boolean,
				default: false
			},
			//	用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件
			formType: {
				type: String,
				default: ''
			},
		},
		methods: {
			//	按钮点击事件
			onClick(e) {
				const {disabled} = this
				if (!disabled) {
					this.$emit('click', e)
				}
			}
		}
	}
</script>

<style lang="scss">
	.bnn-button{
		// height: 90rpx;
		position: relative;
		button{
			color: #fff;
			height: 90rpx;
			display: flex;
			font-size: 32rpx;
			align-items: center;
			justify-content: center;
			line-height: normal;
			background-color: $theme_color;
			// background-image: linear-gradient(to right, #04c181, #02d4a7);
			&:after{border-color: transparent;}
		}
		button[disabled]{
			color: #fff;
			background: $theme_disabled_color;
			&:after{border-color: transparent;}
		}
		button[size=mini]{
			width: fit-content;
			height: fit-content;
			padding: 10rpx;
			font-size: 28rpx;
		}
		.button-hover{
			color: #fff;
			&:after{
				background-color: rgba($color: #fff, $alpha: 0.4);
			}
		}
		
		/* 按钮圆角 */
		.circle{
			border-radius: 1000rpx;
			&:after{border-radius: 1000rpx;}
		}
		
		/* 按钮直角 */
		.square{
			border-radius: 0;
			&:after{border-radius: 0;}
		}
		
		/* 按钮边框 */
		.border:after{border-color: #333;}
	}
</style>